<template>
	<view class="main_page">
		<!-- 导航栏 -->
		<view class="head_box active">
			<cu-custom :isBack="true" :backColor="$headerBgColor" @navigateBack="navigateBack">
				<block slot="content">
					<text class="nav-title shopro-selector-rect">详情</text>
				</block>
			</cu-custom>
		</view>
		<view class="content_box">
			<scroll-view class="scroll-box" scroll-y scroll-with-animation enable-back-to-top>
				<view class="wrapper">
					<view class="banner">
							<image :src="msgObj.image" v-if="msgObj.type == 0" class="banner_img" mode=""></image>
							<video :src="msgObj.video" v-if="msgObj.type == 1" class="banner_img" controls></video>
					</view>
				</view>
				<view class="content-box" v-html="msgObj.str"></view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				seconds: 0,
				time: 0,
				timeSet: null,
				msgObj: {}
			};
		},
		onLoad(option) {
			this.getMsg(option.id)
		},
		methods: {
			navigateBack() {
				let that = this
				this.seconds = 0
				this.time = 0
				if(this.timeSet) {
					clearInterval(that.timeSet)
				}
			},
			getMsg(id) {
				let that = this
				that.$apiBase('taskcoredetails', {
					id
				}).then(res => {
					if (res.code === 1) {
						let str = res.data.content.replace(/<img /g, '<img class="rich_img" ')
						that.msgObj = {
							...res.data,
							str
						}
						that.getReadreward(that.msgObj)
					}
				})
			},
			// 文章获得奖励
			getReadreward(item) {
				let that = this
				this.seconds = this.seconds == 0 ? item.seconds : this.seconds
				that.timeSet = setInterval(() => {
					if(that.seconds > 0) {
						that.seconds --
					} else{
						clearInterval(that.timeSet)
						that.readreward(item.id)
					}
				}, 1000)
			},
			readreward(id) {
				let that = this
				that.$apiBase('readreward', {
					id
				}, false).then(res => {
					if (res.code === 1) {
						if(!res.msg) {
							
						} else {
							uni.showToast({
								title: '获得奖励'
							})
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
.wrapper{
	box-sizing: border-box;
	padding: 0 30rpx;
	margin-top: 20rpx;
	margin-bottom: 40rpx;
	.banner{
		height: 365rpx;
		border-radius: 20rpx;
		overflow: hidden;
		background-color: pink;
		.banner_img {
			width: 100%;
			height: 100%;
		}	
	}
}
.content-box{
	box-sizing: border-box;
	padding: 0 60rpx;
	color: #000000;
	font-size: 28rpx;
	line-height: 38rpx;
}

</style>
